<template>
    <view>
        <!--区域选择器-->
        <div style="margin-top: 30px;">
            <a-input-search v-model:value="searchValue" placeholder=" 请输入井名称" style="width: 90%; margin-bottom: 10px;" @search="onSearch" />
        </div>
        <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" autoExpandParent
            :tree-data="treeData" @select="openDash" :checkStrictly="true" @expand="tapExpand" >
            <template #title="{ title, key, count, isLeaf, }">
                <template v-if="isLeaf">
                    {{ title }}
                </template>
                <template v-else>
                    {{ title }} ({{ count }})
                </template>

            </template>
        </a-tree>
    </view>
</template>
<script setup>
import { queryTree } from '@/module/system/api/dept'
import emitter from '@/utils/mitt'
import { buildTree } from '@/api/well/well.js'
const emit = defineEmits(['search', 'confirm'])
const treeData = ref([])
const expandedKeys = ref([])
const selectedKeys = ref([])
const checkedKeys = ref([])
const searchValue = ref('')
// 获取Tree
function buildWellTree() {
    buildTree().then(res => {
        //  console.log(res)
        treeData.value = res
    })
}
function onSearch(e) {
    console.log(e);
}
// 开启
function openDash(key, e) {

    // 如果是叶子节点 OpenDash
    if (e.node.isLeaf) {
        emit('confirm', e.node.key)
        // expandedKeys.value = expandedKeys.value.concat([e.node.value])
    }
    // 如果是非叶节点 模糊查询
    else {
        emit('search', e.node.key)
    }
}
buildWellTree();
function tapExpand(e, isExpand) {
    console.log(e, isExpand)
    // expandedKeys.value = []
}
emitter.on('flush-well-tree', e => {
    buildWellTree();
})
emitter.on('selected-well-confirm', e => {
    console.log(e)

    expandedKeys.value = expandedKeys.value.concat([e.county])
    selectedKeys.value = [e.id]
})
</script>